<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会议室</title>
    <link rel="stylesheet" href="../../../static/layui-v2.5.7/css/layui.css">
    <link rel="stylesheet" href="../../../static/icon/microphone_screen_camera_board/iconfont.css">
    <link href="../../../static/toastr/toastr.css" rel="stylesheet" />

    <script>
        (function () {
            let config = require('../../../config.json');
            window.config = config;
            let script = document.createElement("script");
            script.src = `${config.nodeRoomServer}/socket.io/socket.io.js`
            console.dir(script)
            document.write(script.outerHTML);
        })()
    </script>

    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .layui-row,
        .layui-xs-col10,
        .layui-xs-col2 {
            width: 100%;
            height: 100%;
        }

        .main-content {
            background-color: gainsboro;
            height: 100%;
        }

        .left-content {
            background-color: grey;
            height: 100%;
        }

        .layui-row {
            height: calc(100% - 150px);
        }

        .window-item,
        .window-item>img {
            display: inline-block;

            position: relative;
            margin: 4px;
        }

        .window-item {
            width: 192px;
            height: 120px;
            border: 2px solid darkgray;
            float: left;
            text-align: center;
            box-sizing: border-box;
            padding-bottom: 5px;
        }

        .window-item:hover {
            border: 2px solid deepskyblue;
        }

        .window-item>img {
            height: 100%;
            max-width: 96%;
        }

        .window-item p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            position: absolute;
            background: white;
            bottom: -20px;
            width: 100%;
        }



        .window-item-content {
            display: grid;
            grid-template-columns: 220px 220px 220px;
            grid-template-rows: 150px 150px 150px;
        }

        .main-video-content {
            padding-right: 20px;
            width: 100%;
            height: 100%;
            position: relative;
            box-sizing: border-box;
            background-color: #c3c2c2;
            display: grid;
            grid-gap: 10px;
            grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(3, 1fr);
            overflow-y: scroll;
        }

        .bottom-util {
            height: 15%;
        }

        .talking-now-btn {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        #audio-wave-canvas {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .local-audio-wave-div {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100px;
            max-height: 100px;
        }
        .person-video-item {
            position: relative;
            box-sizing: border-box;
            background-color: #000;
            min-width: 212px;
            min-height: 116px;
            z-index: 1;
        }
        .person-video-item .screen-video{
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        .person-video-item .camera-video{
            position: absolute;
            width: 25%;
            height: 25%;
            bottom: 25px;
            right: 0;
            z-index: 2;
        }

        .person-video-item .person-info{
            height: 25px;
            background-color: rebeccapurple;
            position: absolute;
            width: 100%;
            z-index: 3;
            left: 0;
            bottom: 0;
        }
        .person-video-item audio{
            display: none;
        }


    </style>
</head>

<body>
    <div class="layui-row">
        <div class="layui-col-xs10 main-content">
            <div class="main-audio-content">
                <audio id="main-audio" muted ></audio>
            </div>

            <div class="main-video-content" id="main-video-content">
                <div class="person-video-item" id="persion-me">

                    <video class="screen-video"  muted></video>
                    <video class="camera-video" muted ></video>
                    <div class="person-info">
                        <span class="person-name" >我：</span>
                        <span class="person-status" >发言中</span>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs2 left-content">
            <div class="left-video-content" style="position: relative;height: calc(100% - 100px);">


            </div>
            <div class="local-audio-wave-div">
                <canvas id="audio-wave-canvas"></canvas>
            </div>
        </div>
    </div>

    <div class="bottom-util layui-form" lay-filter="bottom-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span class="iconfont  icon-maikefeng" remark="麦克风"></span></label>
                <div class="layui-input-inline">
                    <select name="" id="voice-select" lay-filter="voice-select">
                        <option value="default">系统声音</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label"><span class="iconfont  icon-shexiangtou" remark="摄像头"></span></label>
                <div class="layui-input-inline">
                    <select name="" id="video-select" lay-filter="video-select">
                        <option value="NotFound">没有找到设备</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label"><span class="iconfont  icon-pingmugongxiang"></span></label>
                <div class="layui-input-inline">
                    <select name="" id="screen-select" lay-filter="screen-select">
                        <option value="close">关闭</option>
                        <option value="share screen">分享屏幕</option>
                    </select>


                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label"> </label>
                <div class="layui-input-inline">
                    <button class="layui-btn    layui-btn-normal baibanwhiteboard10" title="白板"><span
                            class="iconfont  icon-baibanwhiteboard10"></span>白板</button>
                </div>
            </div>
            <!-- 感觉没有什么用 -->
            <!-- <div class="layui-inline">
                <label class="layui-form-label"> </label>
                <div class="layui-input-inline">
                    <button class="layui-btn layui-btn-normal permissionQuery" title="设备权限检测">
                        设备权限检测
                    </button>
                </div>
            </div> -->

            <div class="layui-inline">
                <label class="layui-form-label"> </label>
                <div class="layui-input-inline">
                    <button class="layui-btn layui-btn-normal copy-room-number" title="复制房间号">
                        复制房间号
                    </button>
                </div>
            </div>
        </div>




    </div>
</body>
<!-- <script src="./audioMeeting.js"></script> -->


<script src="../../../static/layui-v2.5.7/layui.all.js"></script>
<script src="meeting.js"></script>

</html>
